<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" th:content="${SITE_CONFIG.SITE_KWD}">
    <meta name="description" th:content="${SITE_CONFIG.SITE_DESC}">
    <title th:text="${SITE_CONFIG.SITE_NAME}"></title>
    <link rel="stylesheet" th:href="@{/libs/bootstrap/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/libs/font-icon/icon.css}"/>
    <link rel="stylesheet" th:href="@{/libs/theme/pblog/css/web-common.css}"/>
    <link rel="stylesheet" th:href="@{/libs/theme/pblog/css/web-blog.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <style>
        .slidercaptcha {
            margin: 0 auto;
            width: 314px;
            height: 286px;
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
            margin-top: 40px;
        }

        .slidercaptcha .card-body {
            padding: 1rem;
        }

        .slidercaptcha canvas:first-child {
            border-radius: 4px;
            border: 1px solid #e6e8eb;
        }

        .slidercaptcha.card .card-header {
            background-image: none;
            background-color: rgba(0, 0, 0, 0.03);
        }

        .refreshIcon {
            top: -42px;
        }

        .modal-content {
            position: fixed!important;
        }
    </style>
</head>
<body>
<header id="header">
    <div th:replace="home/fragments/navbar :: navbar"></div>
</header>
<div class="pb-container pb-content">
    <div class="pb-main comment">
        <div class="comment-describe">
            <h3 class="comment-describe-title">注册</h3>
        </div>
        <div id="comment" class="comment-main">
            <ul class="nav nav-tabs">
                <li role="register" class="active"><a role="tab" data-toggle="tab" href="#person">个人用户</a></li>
                <li role="register"><a href="#business" role="tab" data-toggle="tab">企业用户</a></li>
            </ul>
            <div class="tab-content">
                <div role="regist—panel-person" class="tab-pane active" id="person">
                    <div style="margin-top: 10px; margin-left: 250px">
                        <div class="form-group form-inline">
                            <label for="username">手机号码：</label>
                            <input type="text" class="form-control" id="username" name="username"
                                   placeholder="请输入手机号码">
                            <button type="button" id="code_button" class="btn btn-primary">获取验证码</button>
                        </div>
                        <div class="form-group form-inline">
                            <label for="phonecode">验&nbsp;&nbsp;证&nbsp;&nbsp;码：</label>
                            <input type="text" class="form-control" id="phonecode" name="phonecode"
                                   placeholder="请输入验证码">
                        </div>
                        <div class="form-group form-inline">
                            <label for="nicname">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</label>
                            <input type="text" class="form-control" id="nicname" name="nicname" placeholder="请输入昵称">
                        </div>
                        <div class="form-group form-inline">
                            <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                            <input type="password" class="form-control" id="password" name="password"
                                   placeholder="请输入密码">
                        </div>
                        <div class="form-group form-inline">
                            <label for="compassword">确认密码：</label>
                            <input type="password" class="form-control" id="compassword" placeholder="请再次输入密码">
                        </div>

                        <div class="checkbox">
                            <label>
                                <input id="agreement" type="checkbox"> 《协议》
                            </label>
                        </div>
                        <button type="button" id="person_regist_button" class="btn btn-primary">注册</button>
                    </div>
                </div>
                <div role="regist—panel-business" class="tab-pane" id="business">
                    企业
                </div>
            </div>
        </div>
    </div>
    <div th:replace="home/fragments/sidebar :: sidebar"></div>
</div>
<div th:replace="home/fragments/footer :: copyrightDark"></div>
<div class="return_top"><a class=" fa fa-arrow-up"></a></div>

<script th:inline="javascript">var ctx = [[@{/}]];</script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/libs/bootstrap/bootstrap.min.js}"></script>
<script th:src="@{/libs/layer/layer.js}"></script>
<script th:src="@{/libs/theme/pblog/js/tagcloud.js}"></script>
<script th:src="@{/js/hc-sticky.js}"></script>
<script th:src="@{/js/core.js}"></script>
<script th:src="@{/js/longbow.js}"></script>
<script th:src="@{/libs/theme/pblog/js/pb-blog.js}"></script>
<script>
    let sid = -1;

    let sendBtn;
    let sendUsername;
    let pagecode = '[[${pagecode}]]';

    $(function () {
        $('#code_button').click(function () {
            let username = $('#username').val();
            if (!username) {
                layer.msg("请输入手机号！")
                return;
            }
            if (!checkPhone(username)) {
                layer.msg("请输入正确的手机号！")
                return;
            }
            $('#slidercaptcha').modal({});
            //发送验证码
            sendBtn = $(this);
            sendUsername = username;
        });

        $('#person_regist_button').click(function () {
            registConfirm();
        });

        $('#captcha').sliderCaptcha({
            repeatIcon: 'fa fa-redo',
            setSrc: function () {
                return '';
            },
            onSuccess: function () {
                sendCode(sendUsername, sendBtn);
            }
        });
    });

    function registConfirm() {
        let agreement = $('#agreement:checked');
        if (agreement.length == 0) {
            layer.msg("请勾选协议！")
            return;
        }
        let username = $('#username').val();
        if (!username) {
            layer.msg("请输入手机号！")
            return;
        }

        if (!checkPhone(username)) {
            layer.msg("请输入正确的手机号！")
            return;
        }

        let phonecode = $('#phonecode').val();

        if (!phonecode) {
            layer.msg("请输入验证码！")
            return;
        }

        let nicname = $('#nicname').val();
        if (!nicname) {
            layer.msg("请输入昵称！")
            return;
        }

        let password = $('#password').val();
        let compassword = $('#compassword').val();
        if (!password) {
            layer.msg("请输入密码！")
            return;
        }

        if (compassword != password) {
            layer.msg("确认密码与密码不一致！")
            return;
        }

        //提交注册信息
        Core.postAjax("/blog/api/regist/input", {
            username: username,
            phonecode: phonecode,
            nicname: nicname,
            password: password
        }, function (data) {
            layer.msg(data.msg, {
                offset: '30%',
                time: 800
            }, function () {
                if (data.status == 200) {
                    console.info(data);
                }
            });
        })

    }

    function checkPhone(phone) {
        if (!(/^1[34578]\d{9}$/.test(phone))) {
            return false;
        }
        return true;
    }

    function sendCode(phone, obj) {
        Core.postAjax("/blog/api/sendcode", {
            phone: phone
        }, function (data) {
            layer.msg(data.msg, {
                offset: '30%',
                time: 800
            }, function () {
                if (data.status == 200) {
                    console.info(data);
                    obj.attr('disabled', 'disabled');
                    let i = 30;
                    let codeButtonInterval = setInterval(function () {
                        obj.text(i-- + "s");
                        if (i == 0) {
                            obj.text("重新获取验证码");
                            obj.attr('disabled', false);
                            clearInterval(codeButtonInterval);
                        }
                    }, 1000);
                } else if (data.status == 500) {

                }
                $('#slidercaptcha').modal('hide');
                $('#captcha').sliderCaptcha('reset');
            });
        })
    }
</script>

<!-- Small modal -->
<div id="slidercaptcha" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content" style="position: fixed">
                <div class="container-fluid">
                    <div class="form-row">
                        <div class="col-12">
                            <div class="slidercaptcha card">
                                <div class="card-header"></div>
                                <div class="card-body">
                                    <div id="captcha"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>